import { memo, useEffect, useState } from 'react'
import { Evcs, queryStationListById } from '../services'
import { Button, Col, Form, Input, Modal, Popover, Row, Select, Space, Table } from 'antd'
import { useRequest } from 'ahooks'
import { ColumnsType } from 'antd/es/table'
import Ellipsis from '@/components/Ellipsis'
import { PAGINATION_CONFIG } from '@/constants'
import dayjs from 'dayjs'
import OrgSelect from '@/components/OrgSelect'

export interface SetRuleModalProps {
  record?: Evcs
  onCancel?: (refresh: boolean) => void
}

const SetRuleModal: React.FC<SetRuleModalProps> = props => {
  const [searchForm] = Form.useForm()
  const [params, setParams] = useState<any>({
    pageNum: 1, pageSize: 10, platOrgId: '', status: 1,
  })
  const { data, loading, mutate } = useRequest(() => queryStationListById(params), {
    ready: !!params.platOrgId,
    refreshDeps: [params],
  })
  const onFinish = (values: any) => {
    setParams({
      ...params,
      ...values,
      orgId: values.org?.id,
      org: undefined,
      pageNum: 1
    })
  }
  const onCancel = (refresh: boolean) => {
    searchForm.resetFields()
    setParams({pageNum: 1, pageSize: 10, platOrgId: '', status: 1})
    mutate(undefined)
    props.onCancel?.(refresh)
  }

  const columns: ColumnsType<any> = [
    {
      title: '场站名称',
      dataIndex: 'stationName'
    },
    {
      title: '场站地址',
      dataIndex: 'address',
      render: val => val && <Popover content={val}>
        <Ellipsis>{val}</Ellipsis>
      </Popover>
    },
    {
      title: '经销商',
      dataIndex: 'orgName',
      width: 180,
      render: val => val || '--',
    },
    {
      title: '开放时间',
      dataIndex: 'createTime',
      render: val => val ? dayjs(val).format('YYYY-MM-DD HH:mm:ss') : '--'
    },
  ]

  useEffect(() => {
    if (props.record) {
      setParams({
        ...params,
        pageNum: 1,
        status: 1,
        platOrgId: props.record.id,
      })
      searchForm.setFieldsValue({status: 1})
    }
    else {
      setParams({
        ...params,
        pageNum: 1,
        status: 1,
        platOrgId: '',
      })
    }
  }, [props.record])

  return (
    <Modal
      title='场站列表'
      open={!!props.record}
      onCancel={() => onCancel(false)}
      confirmLoading={loading}
      destroyOnClose
      okButtonProps={{hidden: true}}
      width={1200}
    >
      <div className="form-area">
        <Form name='searchStationListForm' form={searchForm} onFinish={onFinish} initialValues={{status: 1}}>
          <Row gutter={[20, 20]}>
            <Col span={6}>
              <Form.Item label='场站权限' name='status' rules={[{required: true, message: '请选择场站权限'}]}>
                <Select placeholder='请选择' options={[
                  {label: '开放', value: 1},
                  {label: '不开放', value: 2},
                ]} allowClear />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label='电站名称' name='title'>
                <Input placeholder='请输入' />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label='经销商' name='org'>
                <OrgSelect allowClear inline />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Space>
                <Button type='primary' htmlType='submit' loading={loading}>筛选</Button>
                <Button htmlType='reset'>重置</Button>
              </Space>
            </Col>
          </Row>
        </Form>
      </div>
      <Table<Evcs>
        rowKey='orderId'
        loading={loading}
        dataSource={data?.data}
        columns={columns}
        scroll={{y: 700, x: 'max-content'}}
        pagination={{
          ...PAGINATION_CONFIG,
          current: params.pageNum,
          pageSize: params.pageSize,
          total: data?.totalCount || 0,
          onChange: (page, pageSize) => {
            setParams({
              ...params,
              pageNum: page === params.pageNum ? 1 : page,
              pageSize,
            })
          }
        }}
      />
    </Modal>
  )
}

export default memo(SetRuleModal)
